<template>
  <div>
    <div class="main benList" v-if="isOpenModal" :style="`top: ${(screenY - 50)}px; left: ${screenX}px`">
      <div v-for="(item, index) in titleArr" :key="index" :class="{'style-btn' : !item.isShow}" @click="elBtn(item)">
        {{ item.title }}
      </div>
    </div>
    <commModal ref="commModal" @initTableData='initTableData'></commModal>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { checkDocActionPermission } from "@/api/fileSingle.js"
import copyACtion from './../el-common-js/copy'
import commModal from "./comm-modal.vue";
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
export default {
  mixins: [copyACtion],
  data() {
    return {
      _event: {},
      screenY: 0,
      screenX: 0,
      propsItem: [],
      treeItem: {},
      isOpenModal: false,
      titleArr: [
        {key: 'download', title: '下载', id: 'DOWNLOAD', number: 10},
        {key: 'startSignWorkflow', title: '启动文档签审', id: 'startSignWorkflow', number: ''},
        {key: 'copy', title: '复制', id: '', number: ''},
        {key: 'commElDelete', title: '删除', id: 'DELETE', number: 5},
        // {key: 'commElRevise', title: '修改交付物', id: 'REVISE', number: 1},
        {key: 'commElRename', title: '重命名', id: 'RENAME', number: 16},
        {key: 'commElRevision', title: '修订交付物', id: 'REVISE', number: 7},
        {key: 'cut', title: '剪切', id: 'CHANGE_DOMAIN', number: 12},
        // {key: 'paste', title: '粘贴', id: 'CREATE', number: 2},
        {key: 'commElMobile', title: '移动', id: 'CHANGE_DOMAIN', number: 12},
        {key: 'checkIn', title: '检入', id: 'checkIn', number: ''},
        {key: 'checkOut', title: '检出', id: 'checkOut', number: ''},
        {key: 'unCheckOut', title: '撤销检出', id: 'unCheckOut', number: ''},
        {key: 'commElStatusSetting', title: '设置状态', id: 'SET_STATE', number: 15},
        {key: 'commElControlAuthority', title: '编辑访问控制', id: 'CHANGE_PERMISSIONS', number: 9}
      ],
      titleArr2: [
        {id: 'download', number: 10},
        {id: 'startSignWorkflow', number: ''},
        {id: 'copy', number: ''},
        {id: 'commElDelete', number: 5},
        {id: 'commElRevise', number: 1},
        {id: 'commElRename', number: 16},
        {id: 'commElRevision', number: 7},
        {id: 'cut', number: 12},
        // {id: 'paste', number: 2},
        {id: 'commElMobile', number: 12},
        {id: 'checkIn', number: ''},
        {id: 'checkOut', number: ''},
        {id: 'unCheckOut', number: ''},
        {id: 'commElStatusSetting', number: 15},
        {id: 'commElControlAuthority', number: 9}
      ]
    }
  },
  computed: {
    ...mapGetters({
      'fileSingleData': 'fileSingle'
    })
  },
  components: {
    commModal
  },
  methods: {
    /**
     * params event:右击父类table放回的peop， start:开启关闭， item：父类当前点击的list， index：父类当前点击的list下标
     */
    openRightEl (start, event) {
      if (!start) return this.isOpenModal = start
      checkDocActionPermission({userId: userinfo.loginName, oid: this.fileSingleData.tableArr[0].oid, actions: this.titleArr2}).then((res) => {
        if (res && res.data.success) {
          res.data.data[11].show = res.data.data[9].show   //检入的按钮权限 赋给 撤销检出
          res.data.data[2].show = true          //开放复制按钮
          let arr = res.data.data
          arr.forEach(item => {
            this.titleArr.forEach(el => {
              if (item.id === el.key) {
                el.isShow = item.show
              }
            })
          })
        //  this.titleArr[2].isShow = true
          this.initevent(event)
          this.isOpenModal = start
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    /**
     * 初始化位置
     */
    initevent (event) {
      let elWidth = 140
      let elHeight = 404
      let width = document.body.clientWidth
      let height = document.body.clientHeight
      this.screenY = event.screenY + elHeight > height ? event.screenY - elHeight : event.screenY
      this.screenX = event.screenX + elWidth > width ? event.screenX - elWidth : event.screenX
    },
    /**
     * 功能菜单click事件
     * 功能： 开启不同子组件功能弹窗
     */
    elBtn (item, index) {
      // console.log(item)
      // if(item.key == 'startSignWorkflow'){
      //     this.$emit('elSelectBtn','startDocument')
      // }
      if(item.isShow==true){
      this.$emit('elSelectBtn',item.key)
      this.$refs.commModal.openElModal(item.key,this.fileSingleData.tableArr)
      }
    },
    /**
     * comm-modal 组件回调
     * 功能：通知父组件更新table数据
     */
    initTableData () {
      this.$emit('initTableData')
    },
  }
}
</script>
<style lang="less" scoped>
  .main {
    padding: 10px 0;
    position: fixed;
    width: 140px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20);
    border-radius: 4px;
    z-index: 10000;
    box-sizing: border-box;
    &>div {
      cursor: pointer;
      padding: 0 24px;
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #666666;
      box-sizing: border-box;
      &:hover {
        color: #386BD7;
        background-color: #E8F0FD;
      }
    }
    .style-btn {
      cursor: not-allowed;
      color: rgba(0, 0, 0, 0.25);
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      box-shadow: none;
      &:hover {
        color: rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
      }
    }
  }
</style>